<script setup lang="ts">
import { computed, ref } from 'vue'
import BlockItem from '@/components/BlockItem/BlockItem.vue'
import EChart from '@/components/EChart/EChart.vue'

const props = withDefaults(
  defineProps<{
    data1?: number[]
    data2?: number[]
  }>(),
  {
    data1: () => {
      const rand = () => +(Math.random() * 2000).toFixed(2)
      return Array(12).fill(1).map(rand)
    },
    data2: () => {
      const rand = () => +(Math.random() * 2000).toFixed(2)
      return Array(12).fill(1).map(rand)
    },
  },
)

const title = ref('产值指标趋势')
const chartOption = computed(() => {
  return {
    legend: {
      textStyle: {
        color: 'rgba(167, 178, 219, 1)',
      },
    },
    textStyle: {
      color: 'rgba(137, 157, 191, 1)',
    },
    grid: {
      containLabel: true,
      bottom: '10%',
      left: '8%',
      right: '6%',
    },
    tooltip: {
      trigger: 'axis',
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: 'rgba(137, 157, 191, .29)',
          },
        },
        data: Array(12)
          .fill(1)
          .map((_v, i) => `${i + 1}月`),
      },
    ],
    yAxis: [
      {
        type: 'value',
        name: '千克标准煤/万元',
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: 'rgba(137, 157, 191, .1)',
          },
        },
      },
      {
        type: 'value',
        name: '千瓦时/万元',
        splitLine: {
          lineStyle: {
            color: 'rgba(137, 157, 191, .1)',
          },
        },
      },
    ],
    series: [
      {
        type: 'line',
        name: '产值煤耗',
        showSymbol: false,
        smooth: true,
        yAxisIndex: 0,
        lineStyle: {
          color: 'rgba(64, 98, 200, 1)',
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(64, 98, 200, .8)',
              },
              {
                offset: 1,
                color: 'rgba(64, 98, 200, .1)',
              },
            ],
          },
        },
        data: props.data1,
      },
      {
        type: 'line',
        name: '产值电耗',
        showSymbol: false,
        smooth: true,
        yAxisIndex: 1,
        lineStyle: {
          color: 'rgba(91, 205, 96, 1)',
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(91, 205, 96, .8)',
              },
              {
                offset: 1,
                color: 'rgba(91, 205, 96, .1)',
              },
            ],
          },
        },
        data: props.data2,
      },
    ],
  }
})
</script>

<template>
  <BlockItem :title="title">
    <EChart :option="chartOption" height="24vh" />
  </BlockItem>
</template>
